<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>领域建模工具</title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/umlCanvas.css" />
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="lib/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
		<link rel="stylesheet" href="lib/dialog/style.css" type="text/css">
		<link rel="stylesheet" href="lib/tab/css/style.css" type="text/css"/>
		<link rel="stylesheet" href="lib/comboBox/css/style.css" type="text/css"/>
 		<style>
			.label{
				display:inline-block;
				width:70px;
			}
			.enumitems .enumItem{
				margin:2px 0;
				padding:2px;
			}
			.not_null{
				background-position: right -688px!important;
				box-shadow: 1px 1px 15px rgba(255,167,155,0.8)!important;
				border-color: rgba(255,167,155,0.8)!important;
			}
			
			/*弹窗内表单的样式*/
			.dialog_form label{
				padding-right:10px;
			}
			
			.dialog_form input{
				width:250px;
			}
			.dialog_buttons{
				text-align:right;
				padding:5px 0px;
			}
			.dialog_buttons button{
				outline:none;
				padding:5px 10px;
				font-size:14px;
				border:0;
				cursor:pointer;
			}
			
			.dialog_buttons button:hover{
				background:#A0C1FF;
			}
			.dialog_buttons button:active{
				background:#5A94FF;
			}
			
			.option_list div{
				cursor:pointer;
				text-align:center;
			}
			
			.option_list div:hover{
				background:#ffebbf;
			}
			
			.option_list .selected{
				background:#ccc;
			}
			
			.multiplicity{
				display: inline-block;
				text-align: center;
				width:20px;
				background:white;
				border:1px solid #ccc;
				cursor:pointer;
			}
			
			.multiplicity:hover{
				background:#ffebbf;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="header">
				<div class="logo">
					<img src="" />
				</div>
			</div>
			<div id="container">
				<div class="left">
					<div class="project_tree project_explorer" id="projectExplorer">
						<div class="panel-heading">
							<span>项目列表</span>
							<button id="add_project">添加项目</button>
							<button id="add_chart" style="display:none;">添加图</button>
						</div>
						<ul id="projectTree" class="ztree"></ul>
					</div>
					<!-- 编辑对话框 -->
					<div class="dialog_container" id="dialog_container">
						<div class="dialog entity_dialog">
							<div class="tabs">
								<div class="tab active" for="entity_panel">实体</div>
								<div class="tab" for="property_panel">属性</div>
								<div class="tab" for="action_panel">行为</div>
							</div>
							<div class="panels">
								<!-- 实体面板 -->
								<div class="panel entity_panel active">
									<div>
										<span class="label">实体名</span>
										<input class="name" name="name" type="text" 
											oninput="var thiz=$(this),dialog=thiz.parents('.dialog'); updateNodeName(dialog.data('node'), thiz, dialog.data('canvas'))"/>
									</div>
									<div>
										<span class="label">实体类型</span>
										<select class="entityType" name="entityType" style="height:22px;" oninput="updateEntityType($(this).parents('.dialog').data('node'),$(this).val())">
											<option value="ENTITY">Entity</option>
											<option value="ABSTRACT_ENTITY">AbstractEntity</option>
											<option value="VALUE_OBJECT">ValueObject</option>
											<option value="MAPPED_SUPER_CLASS">MappedSuperClass</option>
										</select>
									</div>
									<div>
										<span class="label" style="vertical-align:top;">备注</span>
										<textarea class="desc" name="description" style="height:100px;margin-top:2px;" onchange="updateDescription($(this).parents('.dialog').data('node'),$(this).val())"></textarea>
									</div>
								</div>
								
								<!-- 属性面板 -->
								<div class="panel property_panel">
									<form>
										<div>
											<span class="label">属性名</span>
											<input type="text" class="propertyName" name="name" 
												oninput="updatePropertyName($(this).parent().parent().data('data'),$(this).val());"
												onchange=""/><!-- 检查属性名 @TODO -->
										</div>
										<div>
											<span class="label">类型</span>
											<input type="text" class="propertyType" name="type" list="property_type_tip" 
												oninput="updatePropertyType($(this).parents('form').data('data'),$(this).val(), $(this).parents('form'));"/>
										</div>
										<div class="genericity_input">
											<span class="label">泛型</span>
											<input type="text" class="propertyGenericity" name="genericity" 
												oninput="updatePropertyGenericity($(this).parent().parent().data('data'),$(this).val());"/>
										</div>
										<div>
											<table style="font-size:14px">
												<tr>
													<td><input type="checkbox" name="isUnique"/>isUnique</td>
													<td><input type="checkbox" name="isStatic"/>isStatic</td>
													<td><input type="checkbox" name="isOrdered"/>isOrdered<br/></td>
												</tr>
												<tr>
													<td><input type="checkbox" name="isDerived"/>isDerived</td>
													<td><input type="checkbox" name="isLeaf"/>isLeaf</td>
													<td><input type="checkbox" name="isReadOnly"/>isReadOnly</td>
												</tr>
											</table>
										</div>
									</form>
									<div class="properties"></div>
								</div>
								
								<!-- 行为面板 -->
								<div class="panel action_panel">
									<div>
										<span class="label">行为名</span>
										<input class="actionName" type="text"/>
									</div>
									<div>
										<span class="label">作用范围</span>
										<select class="actionScope" style="height:22px;">
											<option value="public">public</option>
											<option value="private">private</option>
											<option value="protected">protected</option>
											<option value="package">package</option>
										</select>
									</div>
								</div>
							</div>
						</div>
						
						<!-- 接口对话框 -->
						<div class="dialog interface_dialog">
							<div class="tabs">
								<div class="tab active" for="interface_panel">实体</div>
								<!--<div class="tab" for="property_panel">属性</div>-->
								<div class="tab" for="action_panel">行为</div>
							</div>
							<div class="panels">
								<div class="panel interface_panel active">
									<div>
										<span class="label">实体名</span>
										<input name="name" type="text" oninput="updateNodeName($(this).parents('.dialog').data('node'),$(this).val(),$(this).parents('.dialog').data('canvas'))"/> 
									</div>
									<div>
										<span class="label">实体范围</span>
										<select class="scope" name="entityScope" style="height:22px;" oninput="updateScope($(this).parents('.dialog').data('node'),$(this).val())">
											<option value="public">public</option>
											<option value="private">private</option>
											<option value="protected">protected</option>
											<option value="package">package</option>
										</select>
									</div>
									<div>
										<span class="label" style="vertical-align:top;">备注</span>
										<textarea class="desc" name="description" style="height:100px;margin-top:2px;" oninput="updateDescription($(this).parents('.dialog').data('node'),$(this).val())"></textarea>
									</div>
								</div>
								<div class="panel action_panel">
									<div>
										<span class="label">行为名</span>
										<input class="actionName" type="text"/>
									</div>
									<div>
										<span class="label">作用范围</span>
										<select class="actionScope" style="height:22px;">
											<option value="public">public</option>
											<option value="private">private</option>
											<option value="protected">protected</option>
											<option value="package">package</option>
										</select>
									</div>
								</div>
							</div>
						</div>
						<div class="dialog enum_dialog">
							<div class="tabs">
								<div class="tab active" for="enum_panel">枚举</div>
								<div class="tab" for="enumitem_panel">枚举项</div>
							</div>
							<div class="panels">
								<div class="panel enum_panel active">
									<div>
										<span class="label">枚举名</span>
										<input name="name" type="text" oninput="updateNodeName($(this).parents('.dialog').data('node'),$(this).val(),$(this).parents('.dialog').data('canvas'))"/> 
									</div>
									<div>
										<span class="label">枚举范围</span>
										<select class="scope" name="entityScope" style="height:22px;" oninput="updateScope($(this).parents('.dialog').data('node'),$(this).val())">
											<option value="public">public</option>
											<option value="private">private</option>
											<option value="protected">protected</option>
											<option value="package">package</option>
										</select>
									</div>
									<div>
										<span class="label" style="vertical-align:top;">备注</span>
										<textarea class="desc" name="description" style="height:100px;margin-top:2px;" oninput="updateDescription($(this).parents('.dialog').data('node'),$(this).val())"></textarea>
									</div>
								</div>
								
								<div class="panel enumitem_panel">
									<div class="enumitems"></div>
								</div>
							</div>
						</div>	
					</div>
					<div class="border_bottom"></div>
				</div>
				<div class="right">
					<div class="main_panel">
						<div class="tabs">
							<div class="tab active" for="index"><span class="title">主页</span></div>
						</div>
						<div class="panels">
							<div class="panel index active" style="text-align:center;">
								<h1>欢迎使用领域建模工具</h1>
								<p class="welcome">
									Here is your dashboard, you can <strong>create</strong> a new project or <strong>clone</strong> the examples. Invite your teammates to work (in real-time) on yours models using the share settings.  For any help, write in the<a class="gwt-Anchor">feedback area</a>, we gladly help you out. Enjoy collaborative modeling!
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="footer">Copyright @koala, All rights reserved.</div>
		</div>

		<!-- 一些共用模板 -->
		<div id="template" style="display: none;">
			<!-- 线条模板 -->
			<svg id="line-template">
				<!-- 继承关系连线模板 -->
				<g class="line extends templine" relationType="extends">
					<polyline points="0,0 0,0" style="marker-end:url(#arrow1)"></polyline>
				</g>
				
				<!-- 实现关系连线模板 -->
				<g class="line implements templine" relationType="implements">
					<polyline points="0,0 0,0" style="marker-end:url(#arrow1);stroke-dasharray:5"></polyline>
				</g>
				
				<!-- 聚合关系连线模板 -->
				<g class="line aggregate templine" relationType="aggregate">
					<foreignobject>
						<div class="start line_info">
							<span class="multiplicity">*</span>
						</div>
						<div class="end line_info">
							<span class="multiplicity">*</span>
						</div>
					</foreignobject>
					<polyline points="0,0 0,0" style="marker-start:url(#arrow2)"></polyline>
				</g>
				
				<!-- 组合关系连线模板  -->
				<g class="line compose templine" relationType="compose">
					<foreignobject>
						<div class="start line_info">
							<span class="multiplicity">*</span>
						</div>
						<div class="end line_info">
							<span class="multiplicity">*</span>
						</div>
					</foreignobject>
					<polyline points="0,0 0,0" style="marker-start:url(#arrow3)"></polyline>
				</g>
				<!-- 关联关系连线模板  -->
				<g class="line associate templine" relationType="associate">
					<foreignobject>
						<div class="start line_info">
							<span class="multiplicity">*</span>
						</div>
						<div class="end line_info">
							<span class="multiplicity">*</span>
						</div>
					</foreignobject>
					<polyline points="0,0 0,0"></polyline>
				</g>
			</svg>
			
			<!-- 节点模板 -->
			<div id="node-template">
				<!-- 实体模板 -->
				<div class="node entity">
					<div class="header">
						<span class="entityType node_type">ENTITY</span>
						<div class="name">Entity</div>
					</div>
					<div class="properties"></div>
					<div class="actions"></div>
				</div>
				
				<!-- 接口模板 -->
				<div class="node interface">
					<div class="header">
						<div class="node_type">INTERFACE</div>
						<div class="name"></div>
					</div>
					<div class="actions"></div>	
				</div>
				
				<!-- 枚举模板  -->
				<div class="node enum">
					<div class="header">
						<div class="node_type">ENUM</div>
						<div class="name"></div>
					</div>
					<div class="enumItems"></div>
				</div>
				
				<!-- 属性模板  -->
				<div class="property private">
					<span class="propertyName"></span>
					<span class="property_type">
						<span class="propertyType"></span>
						<span class="genericity">?</span>
					</span>
				</div>
				
				<!-- 枚举项模板 -->
				<div class="enumItem">ENUMITEM</div>
				
				<!-- 行为模板 -->
				<div class="action public">
					<span class="actionName"></span>
					<span class="parameters" style="min-width:10px;"></span>
					<span class="returnType">void</span>
				</div>
				
				<!-- 行为的参数模板 -->				
				<div class="parameter" sortNumber="1">
					<span class="parameterType"></span>
					<span class="parameterName"></span>
				</div>
			</div>
		</div>
		<!-- 以下内在多个画板时的情况下可以共用 ，包括图形的模板、右键菜单等元素-->
		<!-- uml元素模板 -->
		<svg style="height:0;position:absolute;">
			<defs>
				<!-- 空心三角形 -->
				<marker id="arrow1" markerWidth="100" markerHeight="100" refx="16" refy="13" orient="auto">
					<path d="M10,10 L16,13 L10,16 z" style="fill:#e8e8e8;stroke:#5890c1;stroke-dasharray:0;stroke-width:1;"></path>
				</marker>
			    <!-- 空心菱形 -->
			  	<marker id="arrow2" markerWidth="100" markerHeight="100" refx="10" refy="13" orient="auto">
			    	<path d="M10,13 L16,10 L22,13 L16,16 L10,13 z" style="fill:#e8e8e8;stroke:#5890c1;stroke-dasharray:0;stroke-width:1;"></path>
			    </marker>
			    <!-- 实心菱形 -->
			    <marker id="arrow3" markerWidth="100" markerHeight="100" refx="10" refy="13" orient="auto">
			    	<path d="M10,13 L16,10 L22,13 L16,16 L10,13 z" style="fill:#5890c1;stroke-dasharray:0;stroke-width:1;"></path>
			    </marker>
			</defs>
		</svg>
		<!-- 各种右键编辑菜单 -->
		<div id="edit_contextmenus">
			<!-- 添加节点成员的右键菜单 -->
			<div id="add_members" class="contextmenu" tabindex="1">
				<div class="contextmenu_item add_property"><div>添加属性</div></div>
				<div class="contextmenu_item add_action"><div>添加行为</div></div>
				<div class="contextmenu_item add_enumItem"><div>添加枚举项</div></div>
				<div class="contextmenu_item delete"><div>删除</div></div>
			</div>
			
			<!--  -->
			<div id="add_nodes" class="contextmenu" tabindex="2">
				<div class="contextmenu_item add_entity"><div>添加实体</div></div>
				<div class="contextmenu_item add_interface"><div>添加接口</div></div>
				<div class="contextmenu_item add_enum"><div>添加枚举</div></div>
			</div>
			
			<!-- 编辑线条的右键菜单  -->
			<div id="edit_lines" class="contextmenu" tabindex="3">
				<div class="contextmenu_item delete"><div>直线</div></div>
				<div class="contextmenu_item delete"><div>折线</div></div>
				<div class="contextmenu_item delete"><div>删除</div></div>
			</div>
		</div>
		
		<datalist id="property_type_tip">
			<option value="String">String</option>
			<option value="Set">Set</option>
			<option value="List">List</option>
			<option value="Date">Date</option>
			<option value="Long">Long</option>
			<option value="Integer">Integer</option>
		</datalist>
		<!-- 插件js -->
		<script type="text/javascript" src="lib/jquery-2.1.0.min.js" ></script>
		<script type="text/javascript" src="lib/dialog/dialog.js"></script>
		<script type="text/javascript" src="lib/tab/tab.js"></script>
		<script type="text/javascript" src="lib/zTree_v3/js/jquery.ztree.core-3.5.min.js"></script>
		<script type="text/javascript" src="lib/comboBox/comboBox.js"></script>
		<!-- 项目js -->
		<script type="text/javascript" src="js/jqueryUmlCanvas.js" ></script>
		<script type="text/javascript" src="js/editDialog.js"></script>
		<script type="text/javascript" src="js/tool.js" ></script>
		<script type="text/javascript" src="js/edit.js" ></script>
		<script type="text/javascript" src="js/index.js" ></script>
	</body>
</html>